/** @format */

:root {
  .body-wrap-black {
    --body-bgcolor: #252525;
    --light-bgcolor: #2e2e2e;

    --font-color: #00A799;
    --font-color-shallow: #6f6f6f;
    --font-color-white: #dcdde4;
    --font-color-grey: #5c5c5c;
    --font-color-grey2: #808080;
    --font-color-grey-shallow: #727272;
    --border: #3f3f3f;
    --scrollbar-color: #3a3a3a;
    --round-hover-bgcolor: #373737;
    --stripe-bg: #323232;
    --shallow-theme-bgcolor: #2d2625;
    --shallow-theme-bgcolor-hover: #352726;

    //header
    --header-bgcolor: #252525;
    --header-font-color: #00A799;
    --header-input-color: #b1b1b1;
    --header-input-bgcolor: #4b4b4b;
    --header-input-placeholder-color: #727272;

    //menu
    --menu-bgcolor: #202020;
    --menu-item-hover-bg: #1d1d1d;
    --menu-item-active-bg: #1b1b1b;

    //player
    --player-bgcolor: #252525;

    //playlist
    --playlist-bgcolor: #363636;
    --playlist-hover-bgcolor: #2e2e2e;

    //search
    --search-bgcolor: #363636;

    //progress
    --progress-bgcolor: #232323;

    //input
    --input-color: #b1b1b1;
    --input-bgcolor: #4b4b4b;

    //button
    --button-border-color: #454545;
    --button-hover-bgcolor: #3e3e3e;
    //tab
    --tab-highlight-color:#fff;
    --tab-ink-bar-color: #fff;
    --tab-item-color: #797979;
    --tab-item-hover-color: #b4b4b4;
    --tab-item-active-color: #fff;
    //modal
    --modal-bg-color: #202020;
    // prompt
    --prompt-bg-color: #363636;
    //song-detail
    --song-shallow-grey-bg: #2a2a2a;
  }

  .body-wrap-shallow {
    --body-bgcolor: #fff;
    --light-bgcolor: #f5f5f5;

    --font-color: #00A799;
    --font-color-shallow: #404040;
    --font-color-white: #333333;
    --font-color-grey: #5c5c5c;
    --font-color-grey2: #909090;
    --font-color-grey-shallow: #bebebe;
    --border: #ffffff;
    --scrollbar-color: #d0d0d0;
    --round-hover-bgcolor: #ebebeb;
    --stripe-bg: #fafafa;
    --shallow-theme-bgcolor: #fdf6f5;
    --shallow-theme-bgcolor-hover: #fbedec;

    //header
    --header-bgcolor: #f9f9f9;
    --header-font-color: #00A799;
    --header-input-color: #4a4a4a;
    --header-input-bgcolor: #ededed;
    --header-input-placeholder-color: #bebebe;

    // menu
    --menu-bgcolor: #ededed;
    --menu-item-hover-bg: #e7e7e7;
    --menu-item-active-bg: #e2e2e2;

    //player
    --player-bgcolor: #f9f9f9;

    //playlist
    --playlist-bgcolor: #fff;
    --playlist-hover-bgcolor: #efefef;

    //search
    --search-bgcolor: #fff;
    //progress
    --progress-bgcolor: #f5f5f5;

    //input
    --input-color: #4a4a4a;
    --input-bgcolor: #ededed;

    //button
    --button-border-color: #d9d9d9;
    --button-hover-bgcolor: #f5f5f5;

    //tab
    --tab-item-color: #7f7f81;
    --tab-item-hover-color: #343434;
    --tab-item-active-color: #000;

    //modal
    --modal-bg-color: #f9f9f9;
    // prompt
    --prompt-bg-color: #fff;
    //song-detail
    --song-shallow-grey-bg: #e6e5e6;
  }

  .body-wrap-red {
    @extend .body-wrap-shallow;
    --header-bgcolor: #d74d45 !important;
    --header-font-color: #00A799 !important;
    --header-input-color: #efb6b2 !important;
    --header-input-bgcolor: #dd6861 !important;
    --header-input-placeholder-color: #efb6b2 !important;
    --round-hover-bgcolor: #ca4841 !important;
  }
}
